<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- 关键修复1：添加page指令指定编码[1,3,4](@ref) -->
<%@ page import="com.example.dao.NoticeDAO" %>
<%@ page import="com.example.bean.Notice" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社区公告系统 - 居民页面</title>
  <!-- 引入Bootstrap框架 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3498db;
      --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    body {
      background-color: #f8f9fa;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .header {
      background: linear-gradient(135deg, var(--primary-color), #2c3e50);
      color: white;
      padding: 2rem 0;
      margin-bottom: 2rem;
    }
    .notice-card {
      background: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    .notice-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .notice-header {
      background-color: #f8f9fa;
      border-bottom: 1px solid #eee;
      padding: 1rem 1.5rem;
    }
    .notice-body {
      padding: 1.5rem;
    }
    .notice-meta {
      color: #6c757d;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    .empty-state {
      text-align: center;
      padding: 3rem;
      color: #6c757d;
    }
  </style>
</head>
<body>
<%
  // 关键修复2：设置响应编码[3,4,5](@ref)
  response.setContentType("text/html;charset=UTF-8");
  response.setCharacterEncoding("UTF-8");
%>
<div class="header text-center">
  <div class="container">
    <h1 class="display-4">欢迎回来，居民朋友！</h1>
    <p class="lead">最新社区动态与重要通知</p>
  </div>
</div>

<div class="container">
  <!-- 公告区域 -->
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="mb-4"><i class="bi bi-megaphone"></i> 最新公告</h2>
      <div class="notice-list">
        <%
          NoticeDAO noticeDAO = new NoticeDAO();
          List<Notice> noticeList = noticeDAO.getAllNotices();
          if (noticeList != null && !noticeList.isEmpty()) {
            for (Notice notice : noticeList) {
        %>
        <div class="notice-card">
          <div class="notice-header">
            <h3 class="h5 mb-0"><%= notice.getTitle() %></h3>
          </div>
          <div class="notice-body">
            <div class="notice-meta">
              <span><i class="bi bi-clock"></i> <%= notice.getPublishTime() %></span>
              <span class="mx-2">|</span>
              <span><i class="bi bi-person"></i> <%= notice.getPublisher() %></span>
            </div>
            <p class="mb-0"><%= notice.getContent() %></p>
          </div>
        </div>
        <%
          }
        } else {
        %>
        <div class="empty-state">
          <i class="bi bi-inbox" style="font-size: 3rem;"></i>
          <h3 class="h4 mt-3">暂无公告</h3>
          <p>当前没有新的社区公告</p>
        </div>
        <% } %>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
  <div class="container text-center">
    <p class="mb-0">© 2025 社区服务中心 | 居民服务平台</p>
  </div>
</footer>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入Bootstrap图标 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</body>
</html>